<template>
	<view class="addForum_page clearfix">
		<view class="container">
			<form>
				<!--标题 -->
				<view class="title-box">
					<input name="title" v-model="formData.releaseTitle" class="title-input" placeholder="请输入标题" type="text" />
				</view>
				<!-- 正文 -->
				<view class="text">
					<textarea name="text" v-model="formData.releaseContent" class="text-textarea" placeholder="请输入正文" id="" maxlength="-1"></textarea>
				</view>

				<!-- 图片 -->
				<view class="img-box">
					<view class="img-item" v-for="(item,index) in urls" :key="index">
						<image :src="item" class="img"></image>
						<image @click="delImg" :data-index="index" src="../../static/image/page/img-close.png"
							class="img-close">
						</image>
					</view>
					<image @click="chooseImage" src="../../static/image/page/add-img.png" class="add-img"></image>
				</view>

				<!-- 文件 -->
				<view>
					<view v-for="(item,index) in files" :key="index">
						<van-swipe-cell :right-width="45" :left-width=" 45 ">
							<!-- <view slot="left">选择</view> -->
							<van-cell-group>
								<view class="fj-list flex-align">
									<image src="../../static/image/page/file-icon.png" class="file-icon"></image>
									<view class="fj-content">
										<view class="fj-title">{{item.name}}</view>
										<text class="size">{{item.size*0.000000953674316406}}MB</text>
									</view>
								</view>
							</van-cell-group>
							<view slot="right" class="del" @click="delFile" :data-index="index">删除</view>
						</van-swipe-cell>
					</view>
					<!-- 文件上传框 -->
					<!-- <view class="file-upload-box flex-center" @click="chooseFile">
						<image src="../../static/image/page/file-upload-icon.png" class="file-upload-icon"></image>
						<text>上传文件</text>
					</view> -->

					<!-- <uni-file-picker ref="files" :auto-upload="false"  /> -->
				</view>
				<!-- 按钮 -->
				<!-- <button class="btn" formType="submit">发布</button> -->
			</form>

		</view>
		<!-- 	<input class="forum_title" placeholder="请输入标题" v-model="releaseTitle" />
		<textarea class="forum_con" placeholder="请输入正文" v-model="releaseContent" maxlength="-1"></textarea>
		<shmily-drag-image :list.sync="list"></shmily-drag-image> -->
	</view>
</template>

<script>
	import baseURL from "@/common/config.js"
	import graceChecker from '@/common/graceChecker.js'
	import formRuleConfig from '@/config/formRule.config.js';
	import {
		uploadFileTest
	} from '@/common/util.js'
	export default {
		data() {
			return {
				// releaseTitle: "",
				// releaseContent: "",
				// list: [],
				formData: {
					releaseContent: '', //发布内容
					releaseTitle: '', //发布标题
				},
				urls: [], //图片
				files: [] //文件
			};
		},
		//点击发布按钮
		onNavigationBarButtonTap() {
			this.formSubmit()
		},
		methods: {
			//删除文件
			delFile(e) {
				let index = e.currentTarget.dataset.index;
				let arr = this.files;
				arr.splice(index, 1);
				this.files = arr;
			},
			//删除图片
			delImg(e) {
				let index = e.currentTarget.dataset.index;
				let arr = this.urls;
				arr.splice(index, 1);
				this.urls = arr
			},
			//选择文件
			chooseFile() {
				// this.$refs.files.upload()
				// uni.chooseMessageFile({
				// 	count: 10,
				// 	type: 'file',
				// 	success: (res) => {
				// 		// tempFilePath可以作为img标签的src属性显示图片
				// 		const tempFilePaths = res.tempFiles
				// 		console.log(tempFilePaths)
				// 			this.files=this.files.concat(res.tempFiles)
				// 	}
				// })
			},
			//选择图片
			chooseImage() {
				uni.chooseImage({
					count: 9,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						console.log(res)
						// tempFilePath可以作为img标签的src属性显示图片
						const tempFilePaths = res.tempFilePaths;
						let num = this.urls.length + tempFilePaths.length;
						if (num <= 9) {
							this.urls = this.urls.concat(tempFilePaths)
							console.log('111', this.urls)
						} else {
							uni.showToast({
								icon: 'none',
								title: '最多上传9张',
							})
						}
					}
				})
			},
			//上传图片
			async uploadImg(urls, type) {
				let arrUrl = [];
				for (let index = 0; index < urls.length; index++) {
					let ossRes = await this.$api.getOssAuth({
						dir: 'FORUM_DIR'
					});
					let credentials = ossRes.data.data; //凭证
					let url = urls[index];
					console.log('获取url', url)
					let arr = [];
					if (type == 1) { //区分文件和图片 0 图片 1 文件
						arr = url.path.split('.'); //截取后缀
					} else {
						arr = url.split('.'); //截取后缀
					}
					let suffix = arr[arr.length - 1];
					// console.log(suffix)
					let rt = await uploadFileTest(url.path ? url.path : url, credentials, suffix)
					if (rt) {
						arrUrl.push({
							fileType: type,
							url: rt,
							size: url.size,
							showName: url.name
						})
					}

				}
				return arrUrl;
			},
			//提交
			async formSubmit(e) {
				// let data = e.detail.value;
				if (this.formData.releaseTitle != '' && (this.formData.releaseContent != '' || this.urls.length > 0)) {
					if (this.urls.length) {
						//带图片上传
						let urls = await this.uploadImg(this.urls, 0);
						let files = await this.uploadImg(this.files, 1);
						console.log('返沪的图片', urls)
						console.log('返沪的文件', files)

						// this.formData.releaseContent = data.text;
						// this.formData.releaseTitle = data.title;
						this.formData.fileTypeDtoList = urls.concat(files);
						this.$api.addForum(this.formData).then(res => {
							uni.showToast({
								title: '等待审核',
							})
							setTimeout(() => {
								uni.navigateBack({
									delta: 1,
								})
							}, 500)

						})


					} else {
						//纯文字上传
						// this.formData.releaseContent = data.text;
						// this.formData.releaseTitle = data.title;
						this.api.addForumContent(this.formData).then(res => {
							uni.showToast({
								title: res.data.message,
							})
							uni.navigateBack({
								delta: 1,
							})
						})
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: '请输入完整内容',
					})
				}

			}
		}
	}
</script>

<style lang="scss">
	.forum_title {
		margin: 20rpx 30rpx;
		height: 120rpx;
		line-height: 120rpx;
		border-bottom: 1px solid #EEEEEE;
		font-size: 32rpx;
		font-weight: bold;
	}

	.forum_con {
		padding: 0 30rpx;
		height: 200rpx;
		width: 100%;
		box-sizing: border-box;
	}


	// ----------------------------
	.container {
		padding: 30rpx;
	}

	.title-box {
		height: 100rpx;
		width: 100%;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.title-input {
		font-size: 32rpx;
	}

	.text {
		height: 300rpx;
		margin-bottom: 20rpx;
		padding-top: 50rpx;
	}

	.text-textarea {
		/* background-color: #f00; */
		width: 100%;
		height: 100%;
	}

	.img-item {
		margin-right: 30rpx;
		display: inline-block;
		width: calc((100% - 60rpx)/3);
		height: 210rpx;
		margin-bottom: 30rpx;
		position: relative;
	}

	.img-item:nth-child(3n) {
		margin-right: 0;
	}

	.img-item .img {
		width: 100%;
		height: 100%;
	}

	.add-img {
		width: calc((100% - 60rpx)/3);
		height: 210rpx;
		display: inline-block;
	}

	.img-close {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		top: -15rpx;
		right: -15rpx;
	}

	.btn {
		width: 100%;
		height: 98rpx;
		background: #585CF7;
		border-radius: 49rpx;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 98rpx;
		margin-top: 20rpx;
	}

	.img-box {
		margin-bottom: 30rpx;
	}

	.fj-list {
		width: 100%;
		height: 120rpx;
		background: #F6F4FC;
		border-radius: 10rpx;
		padding: 0 30rpx;
		margin-bottom: 20rpx;
	}

	.file-icon {
		width: 62rpx;
		height: 50rpx;
		margin-right: 28rpx;
	}

	.fj-content {
		flex: 1;
	}

	.fj-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
	}

	.size {
		font-size: 24rpx;
		color: #999999;
	}

	.del {
		width: 90rpx;
		height: 100%;
		background: #FC4073;
		font-size: 28rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 110rpx;
		border-radius: 0px 10rpx 10rpx 0px;
	}

	.file-upload-icon {
		width: 36rpx;
		height: 33rpx;
		margin-right: 10rpx;
	}

	.file-upload-box {
		width: 100%;
		height: 120rpx;
		border: 1rpx dashed #999999;
		border-radius: 10rpx;
		font-size: 28rpx;
		color: #999999;
	}
</style>
